<template>
  <div class="managerMana-container common-container">
    <div class="common-top">
      <span class="left title" style="width: 63%">
        精屠龙刀，N字战法({{tableData.length}})<i class="el-icon-loading" v-if="loading"></i><br>
        <span class="tips">
          <span v-for="(item,idx) in sections" v-if="idx<23">{{item}}<b title="涨停数/近五日总涨停数/跌停数">({{sectionStopUpCount[item]}}/{{sectionCount[item]}}/{{sectionStopDownCount[item]}})</b>，</span>
        </span>
      </span>
      <div v-if="hasPerm('stock:info:search')">
        <el-input v-model="query.keyword"
                  placeholder="代码或名称"
                  style="width: 120px;margin-right: 10px;"
                  size="small" clearable></el-input>
        <el-select v-model="query.datetime" placeholder="请选择日期" size="small" clearable style="margin-right: 10px;">
          <el-option
            label="全部日期"
            value="all">
          </el-option>
          <el-option
            v-for="item in dates"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
        <el-select v-model="query.section" placeholder="请选择版块" size="small" clearable style="margin-right: 10px;width: 120px">
          <el-option
            label="全部版块"
            :value="null">
          </el-option>
          <el-option
            v-for="item in sections"
            :key="item"
            :label="`${item}(${sectionStopUpCount[item]}/${sectionCount[item]}/${sectionStopDownCount[item]})`"
            :value="item">
          </el-option>
        </el-select>
        <el-select v-model="query.status" placeholder="状态" size="small" style="margin-right: 10px;width: 100px">
          <el-option
            label="全部"
            :value="null">
          </el-option>
          <el-option
            label="安全"
            value="safely">
          </el-option>
          <el-option
            label="风险"
            value="risky">
          </el-option>
        </el-select>
        <el-button size="small" type="primary" @click="tableModel=!tableModel">
          {{ tableModel ? '图形' : '表格' }}
        </el-button>
      </div>
    </div>
    <div class="common-bot" v-if="tableData.length && hasPerm('stock:info:list')">
      <el-table v-if="tableModel" :data="tableData" style="width: 100%">
        <el-table-column prop="title" label="股票名称" width="260" fixed>
          <template slot-scope="scope">
              <span title="昨日涨幅" v-if="yesterday && yesterday.hasOwnProperty(scope.row.code)"
                    :class="{word_red:yesterday[scope.row.code].riseRatio>0, word_green:yesterday[scope.row.code].riseRatio<0}">
                {{ yesterday[scope.row.code].riseRatio }}%
              </span>
            <el-link :href="`https://quote.eastmoney.com/concept2/${scope.row.code}.html`" target="_blank">
              <b>{{ scope.row.name }}</b>
            </el-link>
            ({{ scope.row.code }})
            <span title="今日涨幅" :class="{word_red:scope.row.info.riseRatio>0, word_green:scope.row.info.riseRatio<0}">
                {{ scope.row.info.riseRatio }}%
              </span>
          </template>
        </el-table-column>
        <el-table-column prop="section" label="版块(涨停数据)" width="160">
          <template slot-scope="scope">
            <span :title="scope.row.concept">{{ scope.row.section }}<b title="涨停数/近五日总涨停数/跌停数">({{sectionStopUpCount[scope.row.section]}}/{{sectionCount[scope.row.section]}}/{{sectionStopDownCount[scope.row.section]}})</b></span>
          </template>
        </el-table-column>
        <el-table-column prop="datetime" label="数据日期">
          <template slot-scope="scope">
            {{ scope.row.createTime | parseTime('{y}-{m}-{d} {h}:{i}') }}
          </template>
        </el-table-column>
        <el-table-column prop="now" label="收盘价/现价(涨幅)" width="160">
          <template slot-scope="scope">
            {{ scope.row.now }}/{{ scope.row.info.now }}
            <span title="涨幅"
                  :class="{word_red:scope.row.currentProfitRatio>0, word_green:scope.row.currentProfitRatio<0}">
                &nbsp;{{ scope.row.currentProfitRatio }}%
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="maxVolumeRatio" label="量倍率"/>
        <el-table-column prop="pe" label="市盈率"/>
        <el-table-column prop="turnoverRatio" label="换手率(%)"/>
        <el-table-column prop="maxTurnoverRatio" label="最大换手率(%)">
          <template slot-scope="scope">
            <span :class="{word_red_b:scope.row.active}">
              {{ scope.row.maxTurnoverRatio }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="score" label="AI评分"/>
        <el-table-column prop="kLine" label="K线图" width="100">
          <template slot-scope="scope">
            <el-popover
              placement="right"
              width="1150"
              trigger="hover">
              <div>
                <img
                  :src="`http://webquoteklinepic.eastmoney.com/GetPic.aspx?nid=${scope.row.info.eastMoneyFullCode}&type=&unitWidth=-6&ef=&formula=KDJ&AT=1&imageType=KXL&timespan=${Math.random()}`"
                  :alt="`http://webquoteklinepic.eastmoney.com/GetPic.aspx?nid=${scope.row.info.eastMoneyFullCode}&type=&unitWidth=-6&ef=&formula=KDJ&AT=1&imageType=KXL&timespan=`">

                <img
                  :src="`https://webquoteklinepic.eastmoney.com/GetPic.aspx?nid=${scope.row.info.eastMoneyFullCode}&type=M&unitWidth=-5&ef=&formula=KDJ&AT=1&imageType=KXL&timespan=${Math.random()}`"
                  :alt="`https://webquoteklinepic.eastmoney.com/GetPic.aspx?nid=${scope.row.info.eastMoneyFullCode}&type=M&unitWidth=-5&ef=&formula=KDJ&AT=1&imageType=KXL&timespan=`">
                <img
                  :src="`https://webquoteklinepic.eastmoney.com/GetPic.aspx?nid=${scope.row.info.eastMoneyFullCode}&type=M30&unitWidth=-5&ef=&formula=KDJ&AT=1&imageType=KXL&timespan=${Math.random()}`"
                  :alt="`https://webquoteklinepic.eastmoney.com/GetPic.aspx?nid=${scope.row.info.eastMoneyFullCode}&type=M30&unitWidth=-5&ef=&formula=KDJ&AT=1&imageType=KXL&timespan=`">
                <img
                  :src="`https://webquotepic.eastmoney.com/GetPic.aspx?imageType=t&type=M4&nid=${scope.row.info.eastMoneyFullCode}&timespan=${Math.random()}`"
                  :alt="`https://webquotepic.eastmoney.com/GetPic.aspx?imageType=t&type=M4&nid=${scope.row.info.eastMoneyFullCode}&timespan=`">
              </div>
              <span style="cursor: pointer" slot="reference">({{ scope.row.code }})</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.status">
              {{ scope.row.status.text }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="stopLoss" label="止损位/幅度">
          <template slot-scope="scope">
            {{ scope.row.stopLoss }}({{ scope.row.stopLossExtent }}%)
          </template>
        </el-table-column>
        <el-table-column
          prop="actions" v-if="hasPerm('stock:pool:edit')"
          label="操作" width="100" fixed="right">
          <template slot-scope="scope">
            <el-button v-if="collects.indexOf(scope.row.code)===-1" type="primary" size="mini" round @click="collect(scope.row,true)" style="padding: 3px 5px;">关注</el-button>
            <el-button v-if="collects.indexOf(scope.row.code)>-1" type="danger" size="mini" round @click="collect(scope.row,false)" style="padding: 3px 5px;">取消关注</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row v-else :gutter="5" v-for="(item,idx) in tableData" :key="idx" class="line">
        <el-col :span="24" style="font-size: 12px;line-height: 150%">
          时间：{{ item.createTime | parseTime('{m}-{d} {h}:{i}') }}，
          现价：<b>{{ item.info.now }}</b>
          <span title="浮盈" :class="{word_red:item.currentProfitRatio>0, word_green:item.currentProfitRatio<0}">({{ item.currentProfitRatio }}%)</span>，
          市值：{{ item.info.totalValueY }}，
          流通市值：{{ item.info.circulationValueY }}，
          市盈率：{{ item.info.pe }}，
          换手率：{{item.info.turnoverRatio}}%/<span title="近期最大换手">{{item.info.maxTurnoverRatio}}%</span>，
          成交额：{{item.info.moneyY}}亿，
          所属概念：{{ item.info.concept }}
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple" style="font-size: 12px;line-height: 150%">
            <img :src="`https://webquotepic.eastmoney.com/GetPic.aspx?imageType=t&type=M4&nid=${item.info.eastMoneyFullCode}&timespan=${Math.random()}`"
                 :alt="`https://webquotepic.eastmoney.com/GetPic.aspx?imageType=t&type=M4&nid=${item.info.eastMoneyFullCode}&timespan=`"
                 :title="item.info.concept">
            <div>
              <span title="昨日涨幅" v-if="yesterday.hasOwnProperty(item.code)"
                    :class="{word_red:yesterday[item.code].riseRatio>0, word_green:yesterday[item.code].riseRatio<0}">
                {{ yesterday[item.code].riseRatio }}%
              </span>
              <el-link :href="`https://quote.eastmoney.com/concept2/${item.code}.html`" target="_blank">
                <b style="color: red;" v-if="item.upRatio > 50">★</b><b>{{ item.name }}</b>
              </el-link>
              ({{ item.code }})
              <span title="今日涨幅" :class="{word_red:item.info.riseRatio>0, word_green:item.info.riseRatio<0}">
                  {{ item.info.riseRatio }}%
              </span>
              振幅：{{item.info.amplitude}}%
              {{ item.createTime | parseTime('{m}-{d} {h}:{i}') }}
            </div>
            <div>
              {{ item.section }}<b title="涨停数/近五日总涨停数/跌停数">({{sectionStopUpCount[item.section]}}/{{sectionCount[item.section]}}/{{sectionStopDownCount[item.section]}})</b>
              <el-button v-if="collects.indexOf(item.code)===-1" type="primary" size="mini" round @click="collect(item,true)" style="padding: 3px 5px;">关注</el-button>
              <el-button v-if="collects.indexOf(item.code)>-1" type="danger" size="mini" round @click="collect(item,false)" style="padding: 3px 5px;">取消关注</el-button>
            </div>
            <div>连涨停：<b>{{ item.stopUpContinuousDays }}</b></div>
            <div>评分：{{ item.score }}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <img
              :src="`https://webquoteklinepic.eastmoney.com/GetPic.aspx?nid=${item.info.eastMoneyFullCode}&type=M&unitWidth=-5&ef=&formula=KDJ&AT=1&imageType=KXL&timespan=${Math.random()}`"
              :alt="`https://webquoteklinepic.eastmoney.com/GetPic.aspx?nid=${item.info.eastMoneyFullCode}&type=M&unitWidth=-5&ef=&formula=KDJ&AT=1&imageType=KXL&timespan=`">
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <img
              :src="`http://webquoteklinepic.eastmoney.com/GetPic.aspx?nid=${item.info.eastMoneyFullCode}&type=&unitWidth=-6&ef=&formula=KDJ&AT=1&imageType=KXL&timespan=${Math.random()}`"
              :alt="`http://webquoteklinepic.eastmoney.com/GetPic.aspx?nid=${item.info.eastMoneyFullCode}&type=&unitWidth=-6&ef=&formula=KDJ&AT=1&imageType=KXL&timespan=`">
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <img
              :src="`https://webquoteklinepic.eastmoney.com/GetPic.aspx?nid=${item.info.eastMoneyFullCode}&type=M30&unitWidth=-5&ef=&formula=KDJ&AT=1&imageType=KXL&timespan=${Math.random()}`"
              :alt="`https://webquoteklinepic.eastmoney.com/GetPic.aspx?nid=${item.info.eastMoneyFullCode}&type=M30&unitWidth=-5&ef=&formula=KDJ&AT=1&imageType=KXL&timespan=`">
          </div>
        </el-col>
      </el-row>
    </div>
    <el-empty style="margin-top: 200px" description="今日还没有收集任何屠龙刀股票，晚点再来查看" v-if="!tableData.length && !loading">
    </el-empty>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import Api from "@/api/index";
import Briefly from "@/layout/components/Briefly";
import pubsub from "pubsub-js";
import stockInfoDragonLayer from "@/api/stockInfoDragonLayer";

export default {
  components: {Briefly},
  computed: {
    ...mapGetters(["name"]),
  },
  data() {
    return {
      tableModel: true,
      tableData: [],
      query: {
        section: null,
        datetime: '',
        keyword: '',
      },
      gender: {
        female: "女",
        male: "男",
      },
      loading: false,
      yesterday: {},
      sectionCount: {},
      sectionStopUpCount: {},
      sectionStopDownCount: {},
      sections: [],
      poolCodes: [],
      dates: [],
      collects: [],
      myInterval: null,
    };
  },
  watch: {
    'query.section'(val) {
      this.getData();
    },
    'query.status'(val) {
      this.getData();
    },
    'query.datetime'(val) {
      this.getData();
    },
    'query.keyword'(val) {
      this.getData();
    },
  },
  methods: {
    joinPool(row) {
      this.$confirm('此操作将把这只股票添加到订阅池, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        Api.stockPool.modify({code: row.code}).then((res) => {
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: '添加成功!'
            });
            this.getData();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    close() {
      this.getData();
    },
    getData() {
      this.loading = true;
      Api.stockInfoDragonLayer.stopUp(this.query).then((res) => {
        this.tableData = res.data.stockInfos;
        this.tableData.forEach(item => {
          item.currentProfitRatio = item.info ? ((item.info.now - item.now) / item.now * 100).toFixed(1) : 0;
        });

        this.sections = res.data.sections;
        this.sectionCount = res.data.sectionCount;
        this.sectionStopUpCount = res.data.sectionStopUpCount;
        this.sectionStopDownCount = res.data.sectionStopDownCount;
        this.yesterday = res.data.yesterday;
        this.poolCodes = res.data.poolCodes;
        this.dates = res.data.dates;
        this.collects = res.data.collects;
        this.loading = false;
      }).catch(e => this.loading = false);
    },
    collect(stock, collected) {
      if (collected) {
        Api.stockCollect.modify({code: stock.code}).then(res => this.getData())
      } else {
        Api.stockCollect.cancel({code: stock.code}).then(res => this.getData())
      }
    },
  },
  mounted() {
    this.getData();
    this.myInterval = setInterval(() => {
      $(".line img").each(function (i, e) {
        $(e).attr("src", $(e).attr("alt") + Math.random())
      })
    }, 5000)
    pubsub.subscribe('notify', (msgName, data) => {
      this.getData()
    })
  },
  destroyed() {
    clearInterval(this.myInterval)
    pubsub.unsubscribe('notify');
  }
};
</script>

<style lang="scss" scoped>
.left3px {
  margin-left: 3px;
}

.word_red {
  font-style: italic;
  font-size: 14px;
  color: red;
}

.word_green {
  font-style: italic;
  font-size: 14px;
  color: green;
}

.word_red_b {
  font-style: italic;
  font-size: 14px;
  color: red;
  font-weight: bold;
}

.common-bot {
  .line {
    padding: 5px 0;
    width: 100%;

    img {
      width: 100%;
    }
  }
}
</style>
